<template>
  <div class="q-mt-lg">
    <div class="q-pb-xs row no-wrap items-center q-col-gutter-xs">
      <div class="col-3">
        <div class="q-pa-sm">Header</div>
      </div>

      <div class="col-3">
        <div class="q-pa-sm bg-primary text-white flex flex-center rounded-borders">l/h</div>
      </div>
      <div class="col-3">
        <div class="q-pa-sm bg-primary text-white flex flex-center rounded-borders">h/H</div>
      </div>
      <div class="col-3">
        <div class="q-pa-sm bg-primary text-white flex flex-center rounded-borders">r/h</div>
      </div>
    </div>

    <div class="q-pb-xs row no-wrap items-center q-col-gutter-xs">
      <div class="col-3" />

      <div class="col-3">
        <div class="q-pa-sm bg-primary text-white flex flex-center rounded-borders">l/L</div>
      </div>
      <div class="col-3">
        <div class="q-pa-sm bg-primary text-white flex flex-center rounded-borders">p</div>
      </div>
      <div class="col-3">
        <div class="q-pa-sm bg-primary text-white flex flex-center rounded-borders">r/R</div>
      </div>
    </div>

    <div class="q-pb-xs row no-wrap items-center q-col-gutter-xs">
      <div class="col-3">
        <div class="q-pa-sm">Footer</div>
      </div>

      <div class="col-3">
        <div class="q-pa-sm bg-primary text-white flex flex-center rounded-borders">l/f</div>
      </div>
      <div class="col-3">
        <div class="q-pa-sm bg-primary text-white flex flex-center rounded-borders">f/F</div>
      </div>
      <div class="col-3">
        <div class="q-pa-sm bg-primary text-white flex flex-center rounded-borders">r/f</div>
      </div>
    </div>

    <div class="q-pb-xs row no-wrap items-center q-col-gutter-xs">
      <div class="col-3" />

      <div class="col-3">
        <div class="q-pa-sm flex flex-center">Left</div>
      </div>
      <div class="col-3" />
      <div class="col-3">
        <div class="q-pa-sm flex flex-center">Right</div>
      </div>
    </div>
  </div>
</template>
